<template>
  <div class="profile-container">
    <div class="user-info">
      <div class="user-info-top">
        <div class="user-info-top-left">
          <img style="width: 60px;height: 60px;border-radius: 100px;" src="../../assets/my/avatar.png" />
          <div class="user-info-top-left-right">
            <div class="nick-name">
              一抹暖光
            </div>
            <div class="user-id">
              ID：243892523
            </div>
          </div>
        </div>
        <!-- 退出登录 -->
        <div class="user-info-top-right" @click="onLogout">
          <img style="width: 25px; height: 25px;" src="../../assets/my/outlog.png" alt="" />
        </div>
      </div>
      <div class="user-info-bottom">
        <div class="user-info-bottom-left">
          <div class="user-info-bottom-left-absolute">
            <div class="user-info-bottom-left-top">
              <div class="username"> 李帅帅 </div>
              <div class="userrole"> 跟进员 </div>
            </div>
            <div class="user-info-bottom-left-bottom">
              门店: 4东营淮河路店
            </div>

          </div>
        </div>
        <div class="user-info-bottom-right">
          会员档案 >
        </div>
      </div>
    </div>
    <div>
      <GridCard title="订单信息" :titleStyle="{ color: '#3fccdf', fontSize: '16px', fontWeight: '700' }"
        class="profile-action-card" :items="OrderCard"></GridCard>
      <div style="height: 10px;"></div>
      <GridCard title="优惠券信息" :titleStyle="{ color: '#3fccdf', fontSize: '16px', fontWeight: '700' }" :columnNum="4"
        :items="CouponsCard"></GridCard>
      <div style="height: 10px;"></div>
      <GridCard :columnNum="4" title="观看记录" :titleStyle="{ color: '#3fccdf', fontSize: '16px', fontWeight: '700' }"
        :items="RecordingCard"></GridCard>
    </div>
    <div class="customer">
      <img style="width: 25px;height: 25px;" src="../../assets/my/customer.png" alt="">
      <div class="customer-tips">
        如有疑问请移步至门店咨询
      </div>
    </div>
  </div>
</template>

<script setup name="Profile">
import { reactive } from 'vue';
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const router = useRouter();

import GridCard from "@/components/GridCard/index.vue"
const OrderCard = reactive({
  order: {
    text: '全部订单',
    img: 'order',
    to: '/orderlist?status=0',
  },
  payment: {
    text: '待付款',
    img: 'payment',
    to: '/orderlist?status=1'
  },
  shipments: {
    text: '待发货',
    img: 'shipments',
    to: '/orderlist?status=2'
  },
  delivery: {
    text: '待收货',
    img: 'delivery',
    to: '/orderlist?status=3'
  },
  receiving: {
    text: '待提货',
    img: 'receiving',
    to: '/orderlist?status=4'
  },
  done: {
    text: '已完成',
    img: 'done',
    to: '/orderlist?status=5'
  },
  aftersales: {
    text: '售后退款',
    img: 'aftersales',
  }
})

const CouponsCard = reactive({
  coupons: {
    text: '优惠券',
    img: 'coupons',
    to: '/coupons'
  },
  certificates: {
    text: '商品券',
    img: 'certificates',
  },
  vouchers: {
    text: '核销券',
    img: 'vouchers',
  },
  userecords: {
    text: '使用记录',
    img: 'userecords',
  }
})
const RecordingCard = reactive({
  recording: {
    text: '观看记录',
    img: 'recording',
  }
})

// 退出登录
function onLogout() {
  userStore.LogOut().then(() => {
    router.push({ path: "/login" });
  });
}

function Log() {
  console.log("Log");
}

</script>

<style lang="scss" scoped>
.profile-container {
  font-size: 16px;

  .user-info {
    padding: 0 15px;
    position: relative;

    .user-info-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .user-info-top-left {
        display: flex;
        align-items: center;
        gap: 20px;
        align-items: center;

        .user-info-top-left-right {
          display: flex;
          flex-direction: column;
          gap: 10px;

          .nick-name {
            margin-top: 10px;
            font-size: 17px;
            font-weight: 700;
          }

          .user-id {
            font-size: 13px;
            color: #999;
          }
        }
      }
    }

    .user-info-bottom {
      margin-top: 20px;
      padding: 10px;
      border-radius: 8px;
      background: linear-gradient(to right, #4dd9bb, #3fccde);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;

      .user-info-bottom-left {
        position: relative;
        height: 45px;

        .user-info-bottom-left-absolute {
          position: absolute;
          width: 160px;
          padding: 10px 15px;
          border-radius: 10px;
          background: linear-gradient(to bottom, #aeece8, #f5fcfc);
          display: flex;
          flex-direction: column;
          gap: 10px;

          .user-info-bottom-left-top {
            display: flex;
            align-items: center;

            .username {
              color: #83cfaa;
              font-weight: 700;
              margin-right: 10px;
            }

            .userrole {
              font-size: 14px;
              color: #fff;
              background-color: #3fccdf;
              padding: 2px 10px;
              border-radius: 10px;
            }
          }

          .user-info-bottom-left-bottom {
            font-size: 14px;
            color: #3fccdf;
          }

        }

      }

      .user-info-bottom-right {
        background-color: #cff3f6;
        color: #3fccde;
        border-radius: 100px;
        padding: 2px 5px 2px 10px;
      }
    }
  }

  .customer {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    padding-bottom: 10px;

    .customer-tips {
      font-size: 18px;
      font-style: italic;
      font-weight: 700;
      margin-left: 10px;
    }
  }
}
</style>